<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button id="btn">点击创建拼接元素</button>
        <button id="btn1">点击删除第一个元素</button>
        <button id="btn2">插入元素为第二个元素</button>
        <button id="btn3">点击插入元素为倒数第二个元素</button>
        <div id="box"></div>
    </div>

</body>
<script>
    //准备资源
    let arr = ['../img/f1.jpg', '../img/f2.jpg', '../img/f3.jpg', '../img/f4.jpg']
    /**
     * 描述 创建图片的函数
     * @date 2020-09-24
     * @returns {any}
     */
    function getElement() {
        //1、创建图片元素
        let img = document.createElement('img')
        //2、添加属性
        let index = Math.floor(Math.random() * arr.length)
        img.setAttribute('src', arr[index])
        img.style.width = '100px'
        img.style.margin = "10px"
        return img
    }
    //拼接元素
    btn.onclick = function () {
        //3、放到id='box'的最后一个元素
        box.appendChild(getElement())
    }
    //删除元素
    btn1.onclick = function () {
        let firstEL = box.firstElementChild
        //父级元素.removeChild(直接子元素)
        //box.removeChild(box.lastElementChild)
        box.removeChild(firstEL)
    }
    //插入元素到元素后
    btn2.onclick = function () {
        let firstEL = box.firstElementChild
        let img = getElement()
        //firstEL元素后面是img
        if (firstEL) {
            firstEL.after(img)
        } else {
            box.appendChild(img)
        }
    }
    //插入元素到元素前
    btn3.onclick = function () {
        let lastEL = box.lastElementChild
        let img = getElement()
        //lastEL元素前是img
        if (lastEL) {
            lastEL.before(img)
        } else {
            box.appendChild(img)
        }
    }
</script>

</html>
</script>

</html>